<template>
  <div class="vichdraw">
    <Editor ref="editorViewRef" id="editorViewRef" />
    <BabylonView ref="baylonViewRef" id="baylonViewRef" />
    <BoomView ref="boomViewRef" id="boomViewRef" />
    <div class="toolbar">
      <el-button-group>
        <el-tooltip effect="dark" :content="$t(`vichdraw.2dView`)" placement="bottom">
          <el-button @click="methods.showKonva"><SvgIcon icon-class="pen"></SvgIcon> </el-button>
        </el-tooltip>
        <el-tooltip effect="dark" :content="$t(`vichdraw.3dView`)" placement="bottom">
          <el-button @click="methods.showBabylon"><SvgIcon icon-class="3d"></SvgIcon> </el-button>
        </el-tooltip>
        <el-tooltip effect="dark" :content="$t(`vichdraw.bomView`)" placement="bottom">
          <el-button @click="methods.showBomView"
            ><SvgIcon icon-class="export"></SvgIcon>
          </el-button>
        </el-tooltip>
      </el-button-group>
    </div>
  </div>
</template>

<script>
import { defineComponent, reactive, onMounted, ref } from 'vue'

import Editor from '@/views/vichdraw/editor.vue'
import BabylonView from '@/views/vichdraw/babylon.vue'
import BoomView from '@/views/vichdraw/bomView.vue'
import { useStore } from '@/store/index'

export default defineComponent({
  components: { Editor, BabylonView, BoomView },

  setup() {
    const editorViewRef = ref(null)
    const baylonViewRef = ref(null)
    const boomViewRef = ref(null)

    const status = reactive({ isCollapse: false, activeName: 'two2D' })
    const methods = {
      initView: () => {
        const store = useStore()
        store.globalParamAction.updateWindowInfo(window.innerHeight, window.innerWidth)
      },
      showKonva: () => {
        boomViewRef.value.status.isShow = false
        baylonViewRef.value.status.isShow = false
        editorViewRef.value.status.isShow = true
      },
      showBabylon: async () => {
        editorViewRef.value.status.isShow = false
        boomViewRef.value.status.isShow = false
        baylonViewRef.value.status.isShow = true
        baylonViewRef.value.methods.draw()
      },
      showBomView: async () => {
        boomViewRef.value.status.babylonData = await baylonViewRef.value.methods.getImageData()
        boomViewRef.value.status.konvaData = await editorViewRef.value.methods.getImageData()
        editorViewRef.value.status.isShow = false
        baylonViewRef.value.status.isShow = false
        boomViewRef.value.status.isShow = true
        boomViewRef.value.methods.createTable()
      }
    }

    onMounted(async () => {
      console.log(window.innerHeight, window.innerWidth)
      const store = useStore()
      store.globalParamAction.updateWindowInfo(window.innerHeight, window.innerWidth)
      baylonViewRef.value.status.isShow = false
      boomViewRef.value.status.isShow = false
      editorViewRef.value.status.isShow = true

      // router.push({ name: 'Editor' })
    })

    return {
      editorViewRef,
      baylonViewRef,
      boomViewRef,
      methods,
      status
    }
  }
})
</script>

<style scoped>
.vichdraw {
  height: 100%;
  width: 100%;
  position: relative;
}

.toolbar {
  width: 100%;
  padding: 8px;
  top: -28px;
  display: flex;
  justify-content: center;
  position: absolute;
}

.babylonView {
  width: 100%;
  height: 100%;
  position: absolute;
}
</style>
